<template>
    <div class="pad5">
        <mu-paper :z-depth="3">
            <div class="flrc pad5">
                <div class=" fwb padl10">{{title}}管理</div>
                <div class="padl10">
                    <mu-button class="mar1" color="primary" tag="button" to="edit" v-if="!useModal">
                        <mu-icon left value="add"></mu-icon>
                        新增
                    </mu-button>
                    <mu-button class="mar1" color="primary" @click="openEdit" v-if="useModal">
                        <mu-icon left value="add"></mu-icon>
                        新增
                    </mu-button>
                    <mu-button class="mar1" color="primary" @click="refresh">
                        <mu-icon left value="refresh"></mu-icon>
                        刷新
                    </mu-button>
                    <mu-button class="mar1" color="primary" @click="copy">
                        <mu-icon left value="add_to_photos"></mu-icon>
                        复制
                    </mu-button>
                    <mu-button class="mar1 c11" color="warning" @click="removeAll">
                        <mu-icon left value="close"></mu-icon>
                        删除
                    </mu-button>
                </div>
                <div class="padl10" v-if="searchOpen">
                    <mu-switch v-model="showSearch" label="高级搜索"></mu-switch>
                </div>
                <div class="padl10" v-if="editOpen">
                    <mu-switch v-model="showEdit" label="批量编辑"></mu-switch>
                </div>
                <div class="flex1 padl20" v-if="sorts.length > 0">
                    <EzSort @change="sort" v-bind:config="sorts"></EzSort>
                </div>
                <div class="bca005 tac padl10 padr10 round30">
                    <mu-text-field placeholder="关键词查询" solo
                                   v-model="searchText"
                                   @focusin="focusSearch"
                                   @focusout="focusSearch"
                                   :class="{longger:isFocusSearch,short:!isFocusSearch}"
                                   class="toggle-width"
                                   action-icon="search"
                                   :action-click="search"
                    ></mu-text-field>
                </div>
            </div>
        </mu-paper>
        <div class="mart5">
            <mu-paper class="pad5" :z-depth="3">
                <div class="bca003 pad5" v-if="showSearch">
                    <EzData v-model="conditions" :config="searchFormConfig" :items="searchFormConfig.items"
                            :key="searchFormUpdateKey"></EzData>
                    <div class="tal">
                        <mu-button small class="mar1" color="primary" @click="getList">
                            <mu-icon left value="search"></mu-icon>
                            查询
                        </mu-button>
                        <mu-button small class="mar1 c11" color="warning" @click="resetSearchBox">
                            <mu-icon left value="replay"></mu-icon>
                            重置
                        </mu-button>
                    </div>
                </div>
                <div class="bca003 pad5" v-if="showEdit">
                    <EzData v-model="editData" :config="editFormConfig" :items="editFormConfig.items"
                            :key="editFormUpdateKey">
                    </EzData>
                    <div>
                        <mu-button small class="mar1" color="primary" @click="edit">
                            <mu-icon left value="search"></mu-icon>
                            编辑
                        </mu-button>
                        <mu-button small class="mar1 c11" color="warning" @click="resetEditData">
                            <mu-icon left value="replay"></mu-icon>
                            重置
                        </mu-button>
                    </div>
                </div>

                <div class="mart10">
                    <mu-data-table selectable checkbox select-all stripe :selects.sync="selected" :columns="headers"
                                   height="540" :data="data" rowKey="id" :key="tableKey">
                        <template slot-scope="scope">
                            <td :align="col.align" v-for="col in headers" :key="`${scope.row.id}${col.name}`">
                                <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{scope.row.id}}</div>
                                <div :class="`ez-${col.align}`" v-if="col.name === 'name'">{{scope.row.name}}</div>
                                <div :class="`ez-${col.align}`" v-if="col.name === 'appId'">{{scope.row.appId}}</div>
                                <div :class="`ez-${col.align}`" v-if="col.name === 'route'">{{scope.row.route}}</div>
                                <div :class="`ez-${col.align}`" v-if="col.name === 'type'">
                                    <span v-if="scope.row.type === 'page'">页面</span>
                                    <span v-if="scope.row.type === 'func'">功能</span>
                                </div>
                                <div :class="`ez-${col.align}`" v-if="col.name === '_actions'">
                                    <div>
                                        <mu-button color="primary" small icon tag="button"
                                                   :to="`edit?id=${scope.row.id}`" v-if="!useModal">
                                            <mu-icon value="edit"></mu-icon>
                                        </mu-button>
                                        <mu-button color="primary" small icon @click="openEdit(scope.row.id)"
                                                   v-if="useModal">
                                            <mu-icon value="edit"></mu-icon>
                                        </mu-button>
                                        <mu-button color="error" small icon @click="remove(scope.row.id)">
                                            <mu-icon value="remove_circle"></mu-icon>
                                        </mu-button>
                                    </div>
                                </div>
                            </td>
                        </template>
                    </mu-data-table>
                </div>
                <div class="flrc bc13 mart10 pad5">
                    <div>每页</div>
                    <div class="marl5">
                        <mu-select solo v-model="limit" dense="" tags @change="getList(1)" style="width: 75px;">
                            <mu-option v-for="size in pageSizeSet" :key="`${size}_p`" :label="`${size}`"
                                       :value="size"></mu-option>
                        </mu-select>
                    </div>
                    <div>条，&nbsp;共：<span class="">{{total}}</span>条</div>
                    <div class="flex1 marl20 tac">
                        <mu-pagination circle raised :total="total" :current.sync="page" :page-size="limit"
                                       @change="getList"></mu-pagination>
                    </div>
                    <div class="setting bcf round30"
                         :class="{'setting-open':settingOpen,'setting-close':!settingOpen}">
                        <div class="setting-open pad5 flex-r flex-start">
                            <div>
                                <mu-switch v-model="askBeforeDelete" label="删除询问"></mu-switch>
                            </div>
                            <div class="marl10" v-if="tableHeadCacheOpen">
                                <mu-switch v-model="headerConfigOpen" label="列配置"></mu-switch>
                            </div>
                        </div>
                    </div>
                    <div>
                        <mu-button :color="settingOpen?'primary':'grey500'" @click="settingOpen = !settingOpen" icon>
                            <mu-icon value="settings"></mu-icon>
                        </mu-button>
                    </div>
                </div>
            </mu-paper>
            <div v-if="tableHeadCacheOpen">
                <mu-paper class="mart10 pad5" :z-depth="3" v-show="settingOpen && headerConfigOpen">
                    <EzTableHeaderManager :cache-key="tableHeadCacheKey" :cached="tableHeadCacheOpen" :value="headers"
                                          :org="headersOrg" @change="onHeaderConfigChange"></EzTableHeaderManager>
                </mu-paper>
            </div>
        </div>

        <!--        modal start-->
        <mu-dialog :open="showForm" scrollable :padding="32">
            <mu-appbar color="primary" :title="title + `信息修改`">
                <mu-button slot="left" icon @click="closeEdit">
                    <mu-icon value="edit"></mu-icon>
                </mu-button>
                <mu-button slot="right" flat @click="closeEdit">
                    退出
                </mu-button>
            </mu-appbar>
            <div v-if="showForm">
                <edit :model-id="id" :is-comp="true" :base="base" @done="closeEdit"></edit>
            </div>
        </mu-dialog>
    </div>
</template>

<script>
    import EzData from "@/comps/EzData";
    import mixin_common from "./js/mixin_common";
    import mixin_config from "./js/mixin_config";
    import mixin_table from "./js/mixin_table";
    import mixin_search from "./js/mixin_search";
    import mixin_edit_many from "./js/mixin_edit_many";
    import mixin_list from "./js/mixin_list";
    import mixin_edit from "./js/mixin_edit";
    import EzSort from "@/comps/list/EzSort";
    import EzTableHeaderManager from "@/comps/list/EzTableHeaderManager";
    import Edit from "./edit";
    import EzCascade from "@/comps/form/EzCascade";

    export default {
        name: "v1-auth-Page-manager", mixins: [
            mixin_common,
            mixin_config,
            mixin_search,
            mixin_edit,
            mixin_edit_many,
            mixin_table,
            mixin_list,
        ],
        components: {EzCascade, Edit, EzTableHeaderManager, EzSort, EzData},
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>
    .toggle-width {
        transition: width .3s;
    }

    .longger {
        width: 240px;
    }

    .short {
        width: 150px;
    }

    .setting {
        transition: width .3s;
        overflow: hidden;
    }

    .setting-close {
        width: 0;
    }

    .setting-open {
        width: 500px;
    }
</style>